<template>
  <div>
      <header>
      <a href="javascript:;" class="left">
        <img src="../assets/images/logo.png" alt="" />
      </a>
      <div class="input">
        <input type="text" placeholder="搜索商品名称" />
        <i class="iconfont icon-sousuo"></i>
      </div>
      <a href="javascript:;" class="right">
        <i class="iconfont icon-kefu1"></i>
      </a>
    </header>
    <section>
      <!-- banner -->
      <Banner/>
      <!-- menubox -->
      <div class="menubox">
        <a href="javascript:;" class="hover" @click="jump(1)">
          <i class="iconfont icon-222222222"></i>
          <span>鲜花</span>
        </a>
        <a href="javascript:;" @click="jump(2)">
          <i class="iconfont icon-shengridangao"></i>
          <span>蛋糕</span>
        </a>
        <a href="javascript:;"  class="cart" @click="jump(3)">
          <i class="iconfont icon-lvzhi2"></i>
          <span>花篮</span>
        </a>
        <a href="javascript:;" @click="jump(5)">
          <i class="iconfont icon-liwulipin"></i>
          <span>礼品</span>
        </a>
        <router-link to="/list">
          <i class="iconfont icon-gengduo"></i>
          <span>更多</span>
        </router-link>
        <!-- <a href="javascript:;" to="/list">
          <i class="iconfont icon-gengduo"></i>
          <span>更多</span>
        </a> -->
      </div>
      <!-- contacts -->
      <div class="contacts">
        <a href="javascript:;" class="tel">
          <i class="iconfont icon-dianhua3"></i>
          <b>400-007-0887</b>
        </a>
        <a href="javascript:;" class="kefu">
          <i class="iconfont icon-kefu1"></i>
          <b>在线客服</b>
        </a>
      </div>
      <!-- 爆款鲜花 -->
      <div>
        <a class="list_title" href="javascript:;">
          爆款鲜花
          <span class="lmore">更多&gt;&gt;</span>
        </a>
      </div>
      <ul class="lists homelist">
        <li class="odd" v-for="(item,index) in list1" :key="index">
          <p class="img">
            <router-link :to="`/detail/${item.browse}`">
              <img
                  :src="item.cover"
                  alt="心动时刻-19朵戴安娜玫瑰花束"
                  @click="handleAdd(item.browse)"
              />
            </router-link>
          </p>
          <p class="tname">
            <a href="javascript:;">{{item.goods_name}}</a>
          </p>
          <p class="price"><a href="javascript:;">¥{{item.sell_price}}</a></p>
        </li>
      </ul>
      <!-- 热卖推荐 -->
      <div>
        <a class="list_title" href="javascript:;">
          热卖推荐
          <span class="lmore">更多&gt;&gt;</span>
        </a>
      </div>
      <ul class="lists homelist">
        <li class="odd" v-for="(item,index) in list2" :key="index">
          <p class="img">
            <router-link to="/detail/${item.browse}">
              <img
                  :src="item.cover"
                  alt="心动时刻-19朵戴安娜玫瑰花束"
                  @click="handleAdd1(item.browse)"
              />
            </router-link>
          </p>
          <p class="tname">
            <a href="javascript:;">{{item.goods_name}}</a>
          </p>
          <p class="price"><a href="javascript:;">¥{{item.sell_price}}</a></p>
        </li>     
      </ul>
      <!-- 生日蛋糕 -->
      <div>
        <a class="list_title" href="javascript:;">
          生日蛋糕
          <span class="lmore">更多&gt;&gt;</span>
        </a>
      </div>
      <ul class="lists homelist">
        <li class="odd" v-for="(item,index) in list3" :key="index">
          <p class="img">
            <router-link to="/detail/${item.browse}">
              <img
                  :src="item.cover"
                  alt="心动时刻-19朵戴安娜玫瑰花束"
                  @click="handleAdd2(item.browse)"
              />
            </router-link>
          </p>
          <p class="tname">
            <a href="javascript:;">{{item.goods_name}}</a>
          </p>
          <p class="price"><a href="javascript:;">¥{{item.sell_price}}</a></p>
        </li>
      </ul>
      <!-- 开业花篮 -->
      <div>
        <a class="list_title" href="javascript:;">
          开业花篮
          <span class="lmore">更多&gt;&gt;</span>
        </a>
      </div>
      <ul class="lists homelist">
        <li class="odd" v-for="(item,index) in list4" :key="index">
          <p class="img">
            <router-link to="/detail/${item.browse}">
              <img
                  :src="item.cover"
                  alt="心动时刻-19朵戴安娜玫瑰花束"
                  @click="handleAdd3(item.browse)"
              />
            </router-link>
          </p>
          <p class="tname">
            <a href="javascript:;">{{item.goods_name}}</a>
          </p>
          <p class="price"><a href="javascript:;">¥{{item.sell_price}}</a></p>
        </li>
      </ul>
      <!-- 爱情鲜花 -->
      <div>
        <a class="list_title" href="javascript:;">
          爱情鲜花
          <span class="lmore">更多&gt;&gt;</span>
        </a>
      </div>
      <ul class="lists homelist">
        <li class="odd" v-for="(item,index) in list5" :key="index">
          <p class="img">
            <router-link to="/detail/${item.browse}">
              <img
                  :src="item.cover"
                  alt="心动时刻-19朵戴安娜玫瑰花束"
                  @click="handleAdd4(item.browse)"
              />
            </router-link>
          </p>
          <p class="tname">
            <a href="javascript:;">{{item.goods_name}}</a>
          </p>
          <p class="price"><a href="javascript:;">¥{{item.sell_price}}</a></p>
        </li>
      </ul>
      <!-- 点评 -->
      <div>
        <a class="list_title" href="javascript:;"> 最新点评 </a>
      </div>
      <div class="comment">
        <ul>
          <li>
            <div class="img">
              <img
                src="http://img.vnasi.com/goodsphoto/iyHJRYbzm5WdMTfvkTLX7utp5yuEm09fe4ncPcq9.jpeg"
                alt=""
              />
            </div>
            <div class="right">
              <van-rate
                v-model="value"
                :size="16"
                color="#ffd21e"
                void-icon="star"
                void-color="#999"
                readonly
              />
              <p>
                鲜花真的很新鲜，香气扑鼻，送礼佳品，物美价廉，包装很精致，配送方便快捷。
              </p>
            </div>
          </li>
          <li>
            <div class="img">
              <img
                src="http://img.vnasi.com///attachment/goods/50/201911/5dc4c7f9a708c.jpg"
                alt=""
              />
            </div>
            <div class="right">
              <van-rate
                v-model="value"
                :size="16"
                color="#ffd21e"
                void-icon="star"
                void-color="#999"
                readonly
              />
              <p>收到花的亲人很满意哦，说花的新鲜程度很高。</p>
            </div>
          </li>
          <li>
            <div class="img">
              <img
                src="http://img.vnasi.com/goodsphoto/Fo36tawEhFxfGHWwMctsYhwQdfywiw2NtxVnJBX1.jpeg"
                alt=""
              />
            </div>
            <div class="right">
              <van-rate
                v-model="value"
                :size="16"
                color="#ffd21e"
                void-icon="star"
                void-color="#999"
                readonly
              />
              <p>花很新鲜，颜色也很好看，包装精美，女神喜欢，下次还会光顾！</p>
            </div>
          </li>
          <li>
            <div class="img">
              <img
                src="http://img.vnasi.com/goodsphoto/2A2RyWidjlo3cYSqGIywxQ77AR01ifx6oT6rKVyV.jpeg"
                alt=""
              />
            </div>
            <div class="right">
              <van-rate
                v-model="value"
                :size="16"
                color="#ffd21e"
                void-icon="star"
                void-color="#999"
                readonly
              />
              <p>
                花太好看了，颜色很鲜艳，没有枯萎的和坏掉的，很新鲜的花朵，很喜欢
              </p>
            </div>
          </li>
        </ul>
      </div>
      <!-- 分站导航 -->
      <div>
        <a class="list_title" href="javascript:;">
          分站导航
          <span class="lmore" @click="handleMore">更多&gt;&gt;</span>
        </a>
      </div>
      <div class="area">
        <a href="javascript:;">北京</a><span class="sep">|</span
        ><a href="javascript:;">上海</a><span class="sep">|</span
        ><a href="javascript:;">天津</a><span class="sep">|</span
        ><a href="javascript:;">重庆</a><span class="sep">|</span
        ><a href="javascript:;">广东</a><span class="sep">|</span
        ><a href="javascript:;">浙江</a><span class="sep">|</span>
        <span id="moresitecon" v-if="isShow">
          <a href="javascript:;">江苏</a><span class="sep">|</span
          ><a href="javascript:;">四川</a><span class="sep">|</span
          ><a href="javascript:;">福建</a><span class="sep">|</span
          ><a href="javascript:;">湖北</a><span class="sep">|</span
          ><a href="javascript:;">陕西</a><span class="sep">|</span
          ><a href="javascript:;">河北</a><span class="sep">|</span
          ><a href="javascript:;">贵州</a><span class="sep">|</span
          ><a href="javascript:;">湖南</a><span class="sep">|</span
          ><a href="javascript:;">河南</a><span class="sep">|</span
          ><a href="javascript:;">山东</a><span class="sep">|</span
          ><a href="javascript:;">山西</a><span class="sep">|</span
          ><a href="javascript:;">江西</a><span class="sep">|</span
          ><a href="javascript:;">广西</a><span class="sep">|</span
          ><a href="javascript:;">安徽</a><span class="sep">|</span
          ><a href="javascript:;">黑龙江</a><span class="sep">|</span
          ><a href="javascript:;">辽宁</a><span class="sep">|</span
          ><a href="javascript:;">吉林</a><span class="sep">|</span
          ><a href="javascript:;">云南</a><span class="sep">|</span
          ><a href="javascript:;">海南</a><span class="sep">|</span
          ><a href="javascript:;">甘肃</a><span class="sep">|</span
          ><a href="javascript:;">内蒙古</a><span class="sep">|</span
          ><a href="javascript:;">宁夏</a><span class="sep">|</span
          ><a href="javascript:;">青海</a><span class="sep">|</span
          ><a href="javascript:;">新疆</a><span class="sep">|</span
          ><a href="javascript:;">西藏</a><span class="sep">|</span
          ><a href="javascript:;">香港</a><span class="sep">|</span
          ><a href="javascript:;">澳门</a><span class="sep">|</span
          ><a href="javascript:;">台湾</a><span class="sep">|</span
          ><a href="javascript:;">国外</a><span class="sep">|</span>
        </span>
      </div>
      <div class="icon">
        <a href="javascript:;">
            <i class="iconfont icon-daipingjia"></i>
            <span>十年品牌</span>
        </a>
        <a href="javascript:;">
            <i class="iconfont icon-truck-full"></i>
            <span>免费配送</span>
        </a>
        <a href="javascript:;">
            <i class="iconfont icon-daojishi"></i>
            <span>3h可达</span>
        </a>
        <a href="javascript:;">
            <i class="iconfont icon-service"></i>
            <span>售后无忧</span>
        </a>
      </div>
    </section>
  </div>
</template>

<script>
import Vue from "vue";
import { Lazyload } from "vant";
import { Rate } from "vant";
import Banner from "./Banner.vue";
import {hList1,hList2,hList3,hList4,hList5} from '../api/hlist'

Vue.use(Rate);
Vue.use(Lazyload);

export default {
  // props: {
  //   list1: {
  //     type: Object,
  //     required:true
  //   },
  // },
  data() {
    return {
      value: 5,
      isShow:false,
      list1:[],
      list2:[],
      list3:[],
      list4:[],
      list5:[]
    };
  },
  created () {
    //  console.log(localStorage);
    // console.log(JSON.parse(localStorage.userInfo));
    hList1().then(res=>{
      // console.log(res.);
      this.list1 = res.data.lists.splice(0,8)
    }),
    hList2().then(res=>{
      // console.log(res);
      this.list2 = res.data.lists.splice(0,8)
    })
    hList3().then(res=>{
      // console.log(res);
      this.list3 = res.data.lists.splice(0,4)
    })
    hList4().then(res=>{
      // console.log(res);
      this.list4 = res.data.lists.splice(0,6)
    })
    hList5().then(res=>{
      // console.log(res);
      this.list5 = res.data.lists.splice(0,8)
    })
  },
  components: {
    Banner,
  },
  methods: {
      jump(n){
        this.$router.push({
          name: "GoodList",
          params: {
            num: n,
          },
        });
      },
      handleMore() {
          this.isShow = !this.isShow
      },
      handleAdd(id){
        let {list1} = this
        let obj =null
        for (let i = 0; i < list1.length; i++) {
          if (list1[i].browse==id) {
            obj = list1[i]
          }
        }
        console.log(obj);
        this.$store.commit('detail/deAddMut',obj)
      },
      handleAdd1(id){
        let {list2} = this
        let obj =null
        for (let i = 0; i < list2.length; i++) {
          if (list2[i].browse==id) {
            obj = list2[i]
          }
        }
        console.log(obj);
        this.$store.commit('detail/detAddMut',obj)
      },
      handleAdd2(id){
        let {list3} = this
        let obj =null
        for (let i = 0; i < list3.length; i++) {
          if (list3[i].browse==id) {
            obj = list3[i]
          }
        }
        console.log(obj);
        this.$store.commit('detail/detaAddMut',obj)
      },
       handleAdd3(id){
        let {list4} = this
        let obj =null
        for (let i = 0; i < list4.length; i++) {
          if (list4[i].browse==id) {
            obj = list4[i]
          }
        }
        console.log(obj);
        this.$store.commit('detail/detaiAddMut',obj)
      },
      handleAdd4(id){
        let {list5} = this
        let obj =null
        for (let i = 0; i < list5.length; i++) {
          if (list5[i].browse==id) {
            obj = list5[i]
          }
        }
        console.log(obj);
        this.$store.commit('detail/detailAddMut',obj)
      }
  },
};
</script>

<style src="../assets/css/index.css" scoped>
.van-swipe .van-swipe img {
  width: 100%;
  height: 100%;
}
</style>
<style src="../assets/css/reset.css" scoped></style>
<style src="../assets/font/iconfont.css" scoped></style>
